<script setup>
import { computed } from 'vue'

import { getAssetsFiles } from '@/utils';

const props = defineProps({
    icon: {// 任务图标
        type: String,
        default: ''
    },
    hideIcon: {// 隐藏任务图标
        type: Boolean,
        default: true
    },
    iconSize: {// 任务图标尺寸
        type: String,
        default: ''
    },
    name: {// 任务名称
        type: String,
        default: '',
        required: true
    },
    type: {// 任务奖励类型 默认 coin 可选 cash, all, none
        type: String,
        default: 'coin'
    },
    num: {// 任务能够获得的奖励数量
        type: Number,
        default: 1
    },
    finishCount: {// 完成任务的次数
        type: Number,
        default: 0
    },
    totalCount: {// 任务总次数
        type: Number,
        default: 1
    },
    status: {// 任务状态 0 未完成, 1 已完成未领取奖励, 2 已完成已领取奖励
        type: Number,
        default: 0
    },
    hideCount: {
        type: Boolean,
        default: false
    },
    hideNum: {// 隐藏任务能够获得的奖励数量
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['btnClick'])

const Status = {
    receive: 1,
    disable: 2
}

const icon = computed(() => {
    return props.icon.indexOf('http') === 0 ? props.icon : new URL(`/src/assets/imgs/icon/${props.icon}`, import.meta.url).href
})

const btnClass = computed(() => {
    return {
        disable: props.status === Status.disable,
        repeat: props.status === Status.receive
    }
})

const btnText = computed(() => {
    if (props.status === Status.disable) {
        return 'Done'
    }

    if (props.status === Status.receive) {
        return 'Claim'
    }

    return 'Go'
})
</script>

<template>
    <div class="task-card">
        <div class="task-card-icon" v-if="props.hideIcon">
            <img v-lazy="icon" alt="task-card-icon" width="50" :style="{ width: props.iconSize }">
        </div>
        <div class="task-card-info">
            <span class="task-card-info-name">
                {{ props.name }}
                <span v-if="!props.hideCount">(<span class="orange">{{ props.finishCount }}</span>/{{ props.totalCount
                    }})</span>
            </span>
            <div class="task-card-info-rewards" v-if="props.type !== 'none'">
                <template v-if="props.type === 'all'" key="all">
                    <img class="task-card-info-rewards_img" v-lazy="getAssetsFiles('coin.png')" :alt="props.type"
                        width="20">
                    <span class="task-card-info-rewards_span">or</span>
                    <img class="task-card-info-rewards_img" v-lazy="getAssetsFiles('cash.png')" :alt="props.type"
                        width="20">
                </template>
                <template v-else :key="props.type">
                    <img class="task-card-info-rewards_img" v-lazy="getAssetsFiles(`${props.type}.png`)"
                        :alt="props.type" width="20">
                    <span class="task-card-info-rewards_span" v-if="!props.hideNum">+{{ props.num }}</span>
                </template>
            </div>
        </div>
        <div class="task-card-button" :class="btnClass" @click="emit('btnClick')">
            <slot name="btn-slot">
                {{ btnText }}
            </slot>
        </div>
    </div>
</template>

<style scoped lang="scss">
.task-card {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 15vmin;
    background-color: #f6f6f6;
    border-radius: 3vmin;
    padding: 2vmin 3vmin;

    &-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        --size: 10vmin;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background-image: linear-gradient(to bottom, #F58691, 50%, #EF3662);
        overflow: hidden;

        img {
            width: 60%;
        }
    }

    &-info {
        display: flex;
        flex-direction: column;
        margin-left: v-bind("props.hideIcon ? '3.5vmin' : '0'");
        width: v-bind("props.hideIcon ? '50vmin' : '100%'");

        &-name {
            font-size: var(--small-font-size);
            font-weight: bold;
            color: var(--text-color);
        }

        &-rewards {
            display: flex;
            align-items: center;
            width: 20vmin;
            padding-top: 1.5vmin;

            img {
                width: 4.5vmin;

            }

            span {
                font-size: var(--mini-font-size);
                line-height: 1;
                color: var(--task-color);
                font-weight: bold;
                padding-top: 1vmin;
                margin: 0 2vmin;
            }
        }
    }

    &-button {
        position: absolute;
        top: 50%;
        right: 3vmin;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 17vmin;
        height: 9vmin;
        background-image: linear-gradient(to bottom, #F79CA5, 50%, #FF557D);
        font-size: var(--small-font-size);
        color: #ffffff;
        border-radius: 10vmin;
    }

}

.disable {
    pointer-events: none;
    background: #a6a6a6 !important;
}

.repeat {
    background: #FD5D19 !important;
}
</style>